<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环渲染指令</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css"> 
</head>
<body>
    <div id="app" >
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>索引</th>
                <th>ID</th>
                <th>姓名</th>
            </thead>

            <tbody>
                <!-- 官方建议：只要用到v-for指令，那么一定要绑定一个 ：key属性
                而且尽量吧id作为key的值 -->
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{ index+1 }}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        const vm = new Vue({
            el:"#app",
            data:{
               list: [
                   {id: 1, name: '张三'},
                   {id: 2, name: '李四'},
                   {id: 3, name: '王五'}
               ]
            },
            methods:{

            }
        })
    </script>
</body>
</html>